<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    @import "link.html"
</head>

<body>
<div class="super-theme-example">
    <a id="msgDemo" href="javascript:void(0)" class="easyui-linkbutton">右下角显示</a>
    <a id="msgDemo2" href="javascript:void(0)" class="easyui-linkbutton">顶部中间显示</a>
    <a id="msgDemo3" href="javascript:void(0)" class="easyui-linkbutton">右上角显示</a>
</div>
<script type="text/javascript">
  $("#msgDemo").on('click', function () {
    $.messager.show({
      title: '我的消息',
      msg: '消息将在3秒后关闭。',
      timeout: 3000,
      showType: 'slide'
    });
  });

  $("#msgDemo2").on('click', function () {
    $.messager.show({
      height: 42,
      timeout: 1500,
      showSpeed: 200,
      msg: '<i class="fa fa-info-circle"></i>&nbsp; 这是一条提示消息',
      style: {
        right: '',
        top: document.body.scrollTop + document.documentElement.scrollTop + 20,
        bottom: '',
        'z-index': 999,
        'box-shadow': '0 1px 6px rgba(0,0,0,.2)'
      }
    });
  });

  $("#msgDemo3").on('click', function () {
    $.messager.show({
      height: 42,
      timeout: 1500,
      showSpeed: 200,
      msg: '<i class="fa fa-info-circle"></i>&nbsp; 这是一条提示消息',
      style: {
        left: '',
        right: 20,
        top: document.body.scrollTop + document.documentElement.scrollTop + 20,
        'z-index': 999,
        'box-shadow': '0 1px 6px rgba(0,0,0,.2)'
      }
    });

  });
</script>
</body>

</html>